<header id="header" class="header">
  <h1 class="logo" >
    <a [routerLink]="['']">
      <img alt="ngx-bootstrap" src="assets/images/logos/header-logo.svg">
    </a>
  </h1>

  <div class="header-info">
    <div class="prev-docs" dropdown *ngIf="previousDocs.length" container="body">
      <div dropdownToggle class="dropdown-toggle">
        {{currentVersion ? 'v' + currentVersion : ''}} <span class="caret"></span>
      </div>
      <ul *dropdownMenu class="dropdown-menu header-dropdown" role="menu">
        <li role="menuitem" *ngFor="let item of previousDocs">
          <a class="dropdown-item" [href]="appUrl + (needPrefix ? item.url : item.unprefixedUrl) + (appHash ? '/' + appHash : '')">{{item.version}}</a>
        </li>
      </ul>
    </div>

    <ul class="header-list">
      <li>
        <a target="_blank" rel="noopener" href="https://stackoverflow.com/questions/tagged/ngx-bootstrap">
          <img src="assets/images/icons/stackoverflow.svg" alt="stackoverflow">
        </a>
      </li>
      <li>
        <a target="_blank" rel="noopener" href="https://github.com/valor-software/ngx-bootstrap">
          <img src="assets/images/icons/icon-git.svg" alt="ngx on github">
        </a>
      </li>
      <li>
        <a target="_blank" rel="noopener" href="https://ngx-slack.herokuapp.com">
          <img src="assets/images/icons/icon-slack.svg" alt="ngx on slack">
        </a>
      </li>
    </ul>
  </div>
</header>
